FlyTalk.views.MapZoom = Ext.extend(Ext.Panel, {
	id: 'mapPanel',
	title: 'Zoom',
	layout: 'hbox',
	fullscreen: false,
			
					
	initComponent: function () {
	OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
		//div:"mapper",
	OpenLayers.Util.onImageLoadErrorColor = "transparent";
	
	//Initialiazing OpenLayers variables
	this.mapBounds = new OpenLayers.Bounds( 0.0, -2048.0, 2048.0, 0.0);
	this.mapMinZoom= 1;
	this.mapMaxZoom= 3;
	

		
		
	this.id = document.getElementById("mapper").innerHTML;
	

	
	//these add the touch feature and touch panel		
	this.options = {
		controls: [
				   new OpenLayers.Control.TouchNavigation
				   ({
					   dragPanOptions: { enableKinetic: true}
															}),
				   //new OpenLayers.Control.ZoomPanel()
				   ],
		maxExtent: new OpenLayers.Bounds(  0.0, -2048.0, 2048.0, 0.0 ),
		maxResolution: 8.000000,
		numZoomLevels: 4
	};
			
			//the reason I spent three days on this, OpenLayers.js looking for a <div> named after the variable below, in this case mapper
			//If else statement to call different maps
		//	if (this.div == "see")
			//{
				this.map = new OpenLayers.Map('mapper', this.options);
		
				this.layer = new OpenLayers.Layer.TMS( "TMS Layer","",
						{  url: "", serviceVersion: '.', layername: '.', alpha: false,
					type: 'png', getURL: this.overlay_getTileURL 
						});
				this.map.addLayer(this.layer);
				this.map.zoomToExtent( this.mapBounds );
				 this.map.setCenter(new OpenLayers.LonLat(17.99,59.3),10);
			
			
		//I removed these panels because they are for mouse and keyboard control
			//this.map.addControl(new OpenLayers.Control.PanZoomBar());
			//this.map.addControl(new OpenLayers.Control.MousePosition());
			//this.map.addControl(new OpenLayers.Control.MouseDefaults());
			//this.map.addControl(new OpenLayers.Control.KeyboardDefaults());	
			//this.touchhandler = new TouchHandler( this.map, 4 );
		//FlyTalk.views.MapZoom.superclass.initComponent.call(this);
			
			
		},
		
		//functions that calculate window size, zoom size and set map accordingly
		overlay_getTileURL:        function (bounds) {
		var res = this.map.getResolution();
		var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
		var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
		var z = this.map.getZoom();
		if (x >= 0 && y >= 0) {
			return this.url + z + "/" + x + "/" + y + "." + this.type;				
		} else {
			return "http://www.maptiler.org/img/none.png";
			//return "http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg";
		}
		},
		
		getWindowHeight:		function () {
		if (self.innerHeight) return self.innerHeight;
		if (document.documentElement && document.documentElement.clientHeight)
			return document.documentElement.clientHeight;
		if (document.body) return document.body.clientHeight;
			return 0;
		},
		
		getWindowWidth:	    function () {
		if (self.innerWidth) return self.innerWidth;
		if (document.documentElement && document.documentElement.clientWidth)
			return document.documentElement.clientWidth;
		if (document.body) return document.body.clientWidth;
			return 0;
		},
		
		resize:	    function()  {  
			var map = document.getElementById("map");  
			var header = document.getElementById("header");  
			var subheader = document.getElementById("subheader");  
			map.style.height = (getWindowHeight()-80) + "px";
			map.style.width = (getWindowWidth()-20) + "px";
			header.style.width = (getWindowWidth()-20) + "px";
			subheader.style.width = (getWindowWidth()-20) + "px";
			if (map.updateSize) { map.updateSize(); };
		} ,
		
		onresize: function(){ 
			resize();
		}
		
		
		
		
});	

	



